<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      layout:decorate="~{layout/layout}">
<head>
<style>
    .input{
        margin: 0;
        padding: 0;
    }
    .input input{
        margin: 0;
        padding: 0;
        border: 0px none;
    }
</style>
</head>
<body>
<div layout:fragment="content">
    <h1 th:text="#{report.select}">商品报告查询</h1>
    <form id="itemForm" th:action="@{/item/list}" class="form-horizontal" method="get">
        <div class="form-group">
            <label for="no" class="col-sm-1 control-label" th:text="#{item.no}">货号</label>
            <div class="col-sm-2">
                <input type="text" name="no" id="no" class="form-control" min="1" max="99999999" th:placeholder="#{item.no}"/>
            </div>
            <label for="name" class="col-sm-1 control-label" th:text="#{item.name}">品名</label>
            <div class="col-sm-2">
                <input type="text" name="name" id="name" class="form-control" th:placeholder="#{item.name}"/>
            </div>
            <label for="lastDate" class="col-sm-2 control-label" th:text="#{item.lastDate}">报告日期</label>
            <div class="col-sm-2">
                <input type="text" name="lastDate" id="lastDate" class="form-control" th:placeholder="#{item.lastDate}"/>
            </div>
            <label for="state" class="col-sm-1 control-label" th:text="#{state}">状态</label>
            <div class="col-sm-1">
                <input type="text" name="state" id="state" class="form-control" min="0" th:placeholder="#{state}"/>
            </div>
        </div>
        <div class="form-group">

            <label for="page" class="col-sm-1 control-label" th:text="#{page}">页次</label>
            <div class="col-sm-1">
                <input type="text" name="page" id="page" class="form-control" value="1" min="1"
                       th:placeholder="#{page}"/>
            </div>
            <label for="pageSize" class="col-sm-2 control-label" th:text="#{pageSize}">每页数量</label>
            <div class="col-sm-1">
                <input type="text" name="pageSize" id="pageSize" class="form-control" value="20" min="1"
                       th:placeholder="#{pageSize}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-5 col-sm-7">
                <a th:href="@{/item/list}" class="btn btn-info" id="addCookies" th:text="#{select}">搜索</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a th:href="@{/item/list}" class="btn btn-info" id="clearCookies" th:text="#{reset}">重置</a>
            </div>
        </div>
    </form>

    <h1 th:text="#{selectResult}">查询结果</h1>
    <div>
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th th:text="#{no}">序号</th>
                <th th:text="#{item.no}">货号</th>
                <th th:text="#{item.name}">品名</th>
                <th th:text="#{state}">状态</th>
                <th th:text="#{item.lastDate}">报告日期</th>
                <th th:text="#{view}">查看</th>

                <th:block sec:authorize="hasAnyAuthority('ROLE_root','ROLE_admin')">
                <th th:text="#{edit}">编辑</th>
                    <!--<th th:text="#{delete}">删除</th>-->
                </th:block>

            </tr>
            </thead>
            <tbody>
            <tr th:attr="data-id=${item.id}" th:each="item,stat : ${itemList.content}">
                <td th:text="${stat.count}">序号</td>
                <td th:text="${item.no}">货号</td>
                <td data-name="name" th:text="${item.name}">品名</td>
                <td data-name="state" th:text="${item.state}">状态</td>
                <td th:text="${item.lastDate}">报告日期</td>
                <td><a th:href="@{/item/view/{id}(id=${item.id})}" th:text="#{view}">查看</a></td>

                <th:block sec:authorize="hasAnyAuthority('ROLE_root','ROLE_admin')">
                <td><a th:href="@{/item/edit/{id}(id=${item.id})}" th:text="#{item.addImage}">添加图片</a></td>
                    <!--<td><a th:href="@{/item/delete/{id}(id=${item.id})}" th:text="#{delete}" onclick="return confirm('确定删除该条目全部资料吗?删除后无法恢复,请谨慎操作!')">删除</a></td>-->
                </th:block>

            </tr>
            </tbody>
        </table>
    </div>
    <div class="form-group">
        <div id="pagination" class="col-sm-12">
            <!-- 分页条位置 -->
            <div>
                <th:block th:unless="${itemList.first}">
                <a th:href="@{/item/pageView/{page}(page=1)}">首页</a>&nbsp;&nbsp;
                <a th:href="@{/item/pageView/{page}(page=${itemList.number})}">上页</a>&nbsp;&nbsp;
                </th:block>

                <th:block th:if="${itemList.first}">
                <span>首页</span>&nbsp;&nbsp;
                <span>上页</span>&nbsp;&nbsp;
                </th:block>

                <th:block th:if="${itemList.totalPages <= 10 && itemList.totalPages > 0}">
                    <a th:each="i:${#numbers.sequence(1, itemList.totalPages)}" th:href="@{/item/pageView/{page}(page=${i})}" th:text="${i +' '}"></a>
                </th:block>

                <th:block th:if="${itemList.totalPages > 10}">
                    <a th:each="i:${#numbers.sequence(1,5)}" th:href="@{/item/pageView/{page}(page=${i})}" th:text="${i +' '}"></a>
                    <span>.....</span>
                    <a th:each="i:${#numbers.sequence(itemList.totalPages - 4, itemList.totalPages)}" th:href="@{/item/pageView/{page}(page=${i})}" th:text="${i +' '}"></a>
                </th:block>

                <th:block th:unless="${itemList.last}">
                <a th:href="@{/item/pageView/{page}(page=${itemList.number+2})}">下页</a>&nbsp;&nbsp;
                <a th:href="@{/item/pageView/{page}(page=${itemList.totalPages})}">尾页</a>&nbsp;&nbsp;
                </th:block>
                <th:block th:if="${itemList.last}">
                <span>下页</span>&nbsp;&nbsp;
                <span>尾页</span>&nbsp;&nbsp;
                </th:block>
                <span th:text="'第' + ${itemList.number + 1} +'页/共'+ ${itemList.totalPages} +'页&nbsp;&nbsp;共'+ ${itemList.totalElements} +'条结果'"></span>
            </div>
        </div>
    </div>
</div>
<th:block layout:fragment="pagescript">
    <script th:src="@{/js/jquery-ui/jquery-ui.datepicker-zh-CN.js}"></script>
    <script th:src="@{/js/jquery-viladate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/jquery-viladate/messages_zh.min.js}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {

            /*$("table tbody tr td:nth-child(3),table tbody tr td:nth-child(4)").click(function(){
                if(!$(this).is('.input')){
                    $(this).addClass('input').html('<input size="'+ ($(this).text().length === 0 ? 5 : $(this).text().length) +'" type="text" value="'+ $(this).text() +'" />').focus();
                }
            });
            $("table tbody tr td input").blur(function(){
                $(this).parent().removeClass('input').html($(this).val() || '');
            });
            size="'+ ($(this).text().length === 0 ? 5 : ($(this).text().length * 2)) +'"
            */
            $("table tbody tr td:nth-child(3),table tbody tr td:nth-child(4)").click(function(){
                if(!$(this).is('.input')){
                    var oldValue = $(this).text();
                    $(this).addClass('input').html('<input type="text" style="width: '+ ($(this).text().length == 0 ? 70 : ($(this).text().length * 14)) +'px"  value="'+ oldValue +'" />').find('input').focus().blur(function(){
                        var newValue = $(this).val();
                        var td = $(this).parent();
                        td.removeClass('input');
                        alert(newValue != oldValue);
                        if (newValue != oldValue){
                            /*<![CDATA[*/
                            var url = [[@{/item/ajaxUpdate}]];
                            /*]]>*/
                            $.ajax({
                                type: "get",
                                url: url,
                                // url: url+"?name="+ td.attr('data-name') +"&data="+newValue+"&id="+td.parent().attr('data-id'),
                                contentType: "application/json;charset=utf-8",
                                data: { name: td.attr('data-name'), data: newValue, id: td.parent().attr('data-id')},
                                dataType: "json",
                                success: function (data) {
                                    if (data == 1){
                                        td.html(newValue || '');
                                    }
                                    else {
                                        alert("修改失败")
                                    }

                                },
                                error: function () {
                                    td.html(oldValue || '');
                                    alert("请求失败")
                                }
                            });
                        }
                        else {
                            td.html(oldValue || '');
                        }
                    });
                }
            }).hover(function(){
                $(this).addClass('hover');
            },function(){
                $(this).removeClass('hover');
            });

            $("#lastDate").datepicker({
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                firstDay: 0,
                showOtherMonths: true,
                selectOtherMonths: true,
                showAnim: 'slideDown',
                showButtonPanel: true
            });
            $("#itemForm").validate({
                onsubmit: true,

                rules: {
                    lastDate: {
                        dateISO: true
                    }
                },
                messages: {

                },
                submitHandler: function (form) {
                    //form.submit();
                },
                invalidHandler: function (form, validator) {
                    return false;
                }
            });

            $("#no").val($.cookie("no"));
            $("#name").val($.cookie("name"));
            $("#lastDate").val($.cookie("lastDate"));
            $("#state").val($.cookie("state"));
            if ($.cookie("page") !== undefined) $("#page").val($.cookie("page"));
            else $("#page").val(1);
            if ($.cookie("pageSize") !== undefined) $("#pageSize").val($.cookie("pageSize"));
            else $("#pageSize").val(20);

            $("#addCookies").click(function () {

                var flag = $("#itemForm").valid();
                if(!flag){
                    //没有通过验证
                    return false;
                }
                if ($("#no").val() !== '') $.cookie("no", $("#no").val(), {});
                else $.removeCookie("no", {});
                if ($("#name").val() !== '') $.cookie("name", $("#name").val(), {});
                else $.removeCookie("name", {});
                if ($("#lastDate").val() !== '') $.cookie("lastDate", $("#lastDate").val(), {});
                else $.removeCookie('lastDate', {});
                if ($("#state").val() !== '') $.cookie("state", $("#state").val(), {});
                else $.removeCookie('state', {});
                if ($("#page").val() !== '') $.cookie("page", $("#page").val(), {});
                else $.removeCookie("page", {});
                if ($("#pageSize").val() !== '') $.cookie("pageSize", $("#pageSize").val(), {});
                else $.removeCookie("pageSize", {});
            });

            $("#clearCookies").click(function () {
                $.removeCookie("no");
                $.removeCookie("name");
                $.removeCookie("lastDate");
                $.removeCookie("state");
                $.removeCookie("page");
                $.removeCookie("pageSize");
            });

        });
    </script>
</th:block>
</body>
</html>